<template>
  <q-page class="row index-container q-pa-md">
    <div class="col-xs-12 col-md-4 q-pa-xs setHeight">
      <div class="child full-width full-height">
        <MainPlayer :mainUrl="mainUrl"/>
      </div>
    </div>
    <div class="col-xs-12 col-md-8 q-pa-xs setHeight">
      <div class="child full-width full-height">
        <PageMap @transformUserInGuide="setUserInGuide" @transformUserInRequest="setUserInRequest"></PageMap>
      </div>
    </div>
    <div class="col-xs-12 col-md-4 q-pa-xs setHeight">
      <div class="child full-width full-height row">
        <SmallPlayer :urls="urls" @sendToMainPlayer="sendToMainPlayer"/>
      </div>
    </div>
    <div class="row col-xs-12 col-md-8 q-pa-xs setHeight">
      <div class="col-xs-12 col-md-4 q-pa-xs full-height">
        <div class="child full-width full-height">
          <page-chat-list></page-chat-list>
        </div>
      </div>
      <div class="col-xs-12 col-md-4 q-pa-xs full-height">
        <div class="child full-width full-height">
          <PageGuideList :userInGuide="userInGuide" :userInRequest="userInRequest"></PageGuideList>
        </div>
      </div>
      <div class="col-xs-12 col-md-4 q-pa-xs full-height">
        <div class="child full-width full-height"></div>
      </div>
    </div>
  </q-page>
</template>

<script>
import PageMap from '../components/PageMap'
import PageGuideList from '../components/PageGuideList'
import PageChatList from '../components/PageChatList'
import MainPlayer from '../components/MainPlayer'
import SmallPlayer from '../components/SmallPlayer'
export default {
  name: 'PageIndex',
  data: () => ({
    urls: [],
    mainUrl: '',
    timer: null,
    userInGuide: '',
    userInRequest: '',
    rtmpBaseUrl: `rtmp://${window.location.host.split(':')[0]}/live/`
    // rtmpBaseUrl: `rtmp://test2.goolton.com/live/`
  }),
  components: {
    PageMap,
    PageGuideList,
    PageChatList,
    MainPlayer,
    SmallPlayer
    // Player,
    // VideoOperator
  },
  inject: ['isMobile', 'isTablet'],
  mounted () {
    this.getOnlineUsers()
    this.timer = setInterval(
      this.getOnlineUsers
      , 1000)
  },
  methods: {
    async getOnlineUsers () {
      const params = new FormData()
      const jsonPkg = {
        appKey: 6,
        commonKey: 300,
        data: {
          gpsLatitude: this.$q.cookies.get('gpsLatitude'),
          gpsLongtitude: this.$q.cookies.get('gpsLongtitude')
        }
        // sessionID: RightUp.userData.sessionId,
      }
      params.append('gdData', JSON.stringify(jsonPkg))
      const response = await this.$http.get(`http://${window.location.host.split(':')[0]}:8000/api/streams`)
      // const response = await this.$http.get(`./api/streams`)
      console.log('TCL: getOnlineUsers -> response', response)
      const { data: { live } } = response
      if (!live) {
        this.urls = []
        return
      }
      const streamUrls = []
      Object.keys(live).forEach(function (item, index) {
        var stream = live[item]
        var re = new RegExp('AAA' + window.location.host.split(':')[0])
        if (stream && stream.publisher && stream.publisher.app && stream.publisher.app === 'live' && re.test(stream.publisher.stream)) {
          streamUrls.push(`rtmp://${window.location.host.split(':')[0]}/live/${stream.publisher.stream}`)
        }
      })
      this.urls = streamUrls
      this.getMainUrl()
    },
    getMainUrl () {
      if (this.urls.length > 0 && !this.mainUrl) {
        this.mainUrl = this.urls[0]
      }
    },
    sendToMainPlayer (event) {
      this.mainUrl = event
    },
    setUserInGuide (data) {
      this.userInGuide = data
    },
    setUserInRequest (data) {
      this.userInRequest = data
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
    this.timer = null
  }
}
</script>

<style lang="stylus">
@import ('~variables');

.index-container {
  .child {
    border: 1px solid $mediumSpringGreen;
    background-color: $darkSlateGray;
  }

  .setHeight {
    height: 46vh;
  }

  background-color: $deepGreen;
}

.single-row {
  height: 47vh !important;
}
</style>
